@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.onboarding-hooray {
	text-align: center;

	svg {
		max-width: 350px;
		margin-bottom: -20px;
	}

	.onboarding-title {
		font-size: 3rem;
		color: var(--studio-gray-100);
		margin-bottom: 0.75rem;

		@media (max-width: 1080px) {
			line-height: 1;
		}
	}

	.onboarding-subtitle {
		color: var(--studio-gray-50);
		margin-bottom: 1.5em;
	}

	.components-button.action-buttons__next {
		min-width: 100px;
		padding: 10px 24px !important;
		margin: 0 0.75em 0.75em 0.75em;
		border-radius: 4px;
	}
}

.onboarding-hooray__animate {
	.onboarding-title {
		animation: hooray-fade 0.9s ease-in-out, hooray-jump 0.8s cubic-bezier(0.21, 0.19, 0.24, 0.99);
	}

	.onboarding-subtitle,
	.components-button.action-buttons__next.is-primary {
		opacity: 0;
		animation: hooray-fade 0.9s ease-in-out 0.8s forwards, hooray-jump 0.8s cubic-bezier(0.21, 0.19, 0.24, 0.99) 0.8s forwards;
	}
}


@keyframes hooray-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes hooray-jump {
	from {
		transform: translateY(20px);
	}

	to {
		transform: none;
	}
}
